<template>
	<view class="device-page">
		<view class="header">
			<view class="" style="background: #fff;height: 88rpx;">
				<u-tabs :current="current" :list="list1" @click="click"></u-tabs>
			</view>
			<!-- 搜索区 -->
			<view class="search-wrap">
				<view class="search-box">
					<u-icon name="search"></u-icon>
					<input class="search-input" v-model="keyword" placeholder="输入流量包名称搜索"
						placeholder-class="search-placeholder" @confirm="onSearch" />
					<u-icon name="close-circle-fill" size="22" v-if="keyword" @click="keyword='';onSearch()"></u-icon>
				</view>
				<button class="filter-btn" @click="onSearch">筛选</button>
			</view>
		</view>
		<view class="" style="height: 185rpx;"></view>
		<!-- SIM卡列表 -->
		<view class="sim-list">
			<view class="sim-item" style="position: relative;margin-bottom: 16rpx;" v-for="(item, index) in simList"
				:key="index">
				<view class="sim-info" style="width: 100%;">
					<!-- 					<view class="time-box">
						<text>剩</text>
						<u-count-down :time="15* 60 * 1000" format="mm:ss"></u-count-down>
						<text>支付关闭</text>
					</view> -->
					<view class="sim-header" style="margin-bottom: 16rpx;">
						<text class="sim-number">{{ item.orderNo }}</text>
					</view>
					<view class="sim-details">
						<view class="detail-row">
							<text class="label">套餐名称：</text>
							<text class="value">{{ item.packageName }}</text>
						</view>
						<view class="detail-row">
							<text class="label">有效期：</text>
							<text class="value">{{ item.endTime || '待激活'}}</text>
						</view>
						<view class="detail-row">
							<text class="label">状态：</text>
							<text class="status" :style="{ color: getStatusColor(item.orderState) }">
								{{ orderStateMap[item.orderState]  }} <text v-if="item.reason"> （{{item.reason||''}}）
								</text>
							</text>

						</view>
						<view class="detail-row">
							<text class="label">详细：</text>
							<text class="value">{{ item.description }}</text>
						</view>
					</view>
					<view class="mt10" style="display: flex;align-items: center;justify-content: space-between;"
						v-if="item.orderState === '0'">
						<text></text>
						<button style="" class="recharge-btn" @click="recharge(item)">
							<text style="margin-left: 20rpx;">立即支付</text>
						</button>
					</view>
				</view>

			</view>
			<view class="" style="padding-top: 150rpx;">
				<u-empty v-if="simList.length === 0" mode="data">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		orderListApi,
		wechatPlaceOrderApi,
		queryOrderNoApi
	} from '@/api/index.js';
	export default {
		data() {
			return {
				pageFlag: false,
				keyword: '',
				selectedItems: [],
				simList: [

				],
				orderStateMap: {
					0: '待支付',
					1: '已支付',
					2: '已完成',
					3: '已关闭',
					4: '订购失败',
					5: '已退款',
					6: '退款失败',
				},
				list1: [{
						name: '全部',
						value: '-1'
					},
					{
						name: '待支付',
						value: 0
					}, {
						name: '已支付',
						value: 1
					}, {
						name: '已完成',
						value: 2
					}, {
						name: '已关闭',
						value: 3
					}, {
						name: '订购失败',
						value: 4
					}, {
						name: '已退款',
						value: 5
					}, {
						name: '退款失败',
						value: 6
					}
				],
				searchData: {
					orderNo: "",
					orderState: "",
					payState: "",
					packageName: "",
					pageNum: 1,
					pageSize: 10,
					orderByColumn: "create_time",
					isAsc: "desc"
				},
				total: 0,
				totalPrice: 0,
				isAllSelected: false,
				current: 0
			};
		},
		computed: {
			// filteredList() {
			// 	return !this.keyword ? this.simList : this.simList.filter(item => item.simNumber.includes(this.keyword));
			// },
			// total() {
			// 	return this.simList.length;
			// },
			selectedCount() {
				return this.selectedItems.length;
			}
		},
		onLoad(options) {
			if (options.current) {
				this.current = Number(options.current);
				this.searchData.orderState = this.list1[this.current].value;
				this.iccList();
			} else {
				this.iccList();
			}
		},
		onReachBottom() {
			if (!this.pageFlag) {
				if (this.searchData.pageNum * this.searchData.pageSize > this.total) return
				this.searchData.pageNum += 1;
				this.iccList(true)
			}
			console.log('触底');
		},
		onHide() {
			// console.log('切换页面');
			this.pageFlag = false
			this.searchData.pageNum = 1
		},
		methods: {
			// 搜索
			onSearch() {
				this.searchData.packageName = this.keyword;
				this.pageFlag = false;
				this.searchData.pageNum = 1;
				this.iccList()
			},
			click(e) {
				console.log(e);
				this.current = e.index;
				this.searchData.orderState = e.value === '-1' ? '' : e.value;
				console.log(this.searchData, 'this.searchData');
				this.onSearch();
			},
			// 查询订单列表
			async iccList(next) {
				let newParams = {
					...this.searchData
				};
				if (newParams.orderState !== '') {
					newParams.orderState = String(newParams.orderState);
				}
				console.log(newParams);
				uni.showLoading({
					title: '数据加载中'
				})
				try {
					const res = await orderListApi(newParams);
					console.log(res, 'res-流量列表');
					if (res.code === 200) {
						if (this.searchData.pageNum === 1 && res.rows.length === 0) {
							this.simList = [];
							this.total = 0;
						}
						this.total = res.total;
						if (res.rows && res.rows.length > 0) {
							res.rows.forEach(item => {
								console.log(item, 'item');
							})
							const iccids = next ?
								this.simList.concat(res.rows) :
								res.rows
							this.simList = iccids
						} else {
							if (next) {
								this.pageFlag = true
							}
						}
					}
				} catch {

				} finally {
					uni.hideLoading();
				}

			},
			handleSelect(simId) {
				const index = this.selectedItems.indexOf(simId);
				if (index === -1) this.selectedItems.push(simId);
				else this.selectedItems.splice(index, 1);
				this.updateAllSelection();
			},
			toggleAll() {
				if (this.isAllSelected) this.selectedItems = [];
				else this.selectedItems = this.simList.map(item => item.simId);
				this.isAllSelected = !this.isAllSelected;
			},
			updateAllSelection() {
				this.isAllSelected = this.selectedItems.length === this.simList.length;
			},
			// 充值
			async recharge(item) {
				// if (!this.selectedItems.length) {
				// 	uni.showToast({
				// 		title: '请先选择要充值的SIM卡',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				console.log(item, 'item');
				console.log(item.iccId, 'iccId');
				console.log(item.createTime);
				const res = await wechatPlaceOrderApi({
					iccId: item.iccId
				});
				console.log(res, 'res');
				if (res.code === 200) {
					wx.requestPayment({
						timeStamp: res.data.timeStamp, //后端返回的时间戳
						nonceStr: res.data.nonceStr, //后端返回的随机字符串
						package: res.data.package, //后端返回的prepay_id
						signType: res.data.signType, //后端签名算法,根据后端来,后端MD5这里即为MD5
						paySign: res.data.paySign, //后端返回的签名
						success: (result) => {
							console.log('用户支付扣款成功', result)
							this.queryOrderNo(res.data.orderNo);
							uni.showModal({
								title: '提示',
								content: '恭喜您充值成功',
								showCancel: false,
								success: (resp) => {
									if (resp.confirm) {
										this.onSearch();
									}
								}
							})
						},
						fail: (error) => {
							this.queryOrderNo(res.data.orderNo);
							console.log('用户支付扣款失败', error)
						}
					})
				}
			},
			// 查询微信支付订单API（用户支付完调用，可根据返回的支付状态按需循环调用）
			async queryOrderNo(orderNo) {
				const res = await queryOrderNoApi(orderNo);
				console.log(res, 'res');
			},
			getStatusColor(status) {
				console.log(status);
				switch (status) {
					case '0':
						return '#f56c6c'
					case '1':
						return '#0081ff'
					case '2':
						return '#00ff00'
					case '3':
						return '#ffaa00'
					case '4':
						return '#5500ff'
					case '5':
						return '#550000'
					default:
						break;
				}
			}
		}
	};
</script>

<style lang="scss">
	.device-page {
		min-height: 100vh;
		background: #f6f7f8;
		position: relative;
		padding-bottom: 180rpx;
	}

	.header {
		position: fixed;
		top: 0rpx;
		left: 0;
		width: 100%;
		// border: 1rpx solid #000;
		height: 188rpx;
		z-index: 9999;
	}

	.search-wrap {
		display: flex;
		align-items: center;
		padding: 16rpx 18rpx;
		gap: 14rpx;
		width: 100%;
		background: #fff;
		z-index: 99999;
	}

	.search-box {
		flex: 1;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 50rpx;
		padding: 10rpx 16rpx;
		box-shadow: 0 6rpx 18rpx rgba(24, 35, 50, 0.04);
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
	}

	.search-placeholder {
		color: #bfc6cc;
	}

	.clear {
		font-size: 22rpx;
		color: #999;
		padding: 6rpx;
	}


	/* 筛选按钮 */
	.filter-btn {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 0rpx 18rpx;
		font-size: 26rpx;
		color: #0081ff;
		box-shadow: 0 6rpx 18rpx rgba(254, 84, 99, 0.06);
	}

	/* SIM卡列表 */
	.sim-list {
		margin: 24rpx;
		// background: #fff;
		overflow: hidden;
	}

	.sim-item {
		display: flex;
		padding: 32rpx;
		border-bottom: 1px solid #eee;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 10rpx 25rpx rgba(0, 0, 0, 0.05);
		position: relative;
	}

	.custom-checkbox {
		display: flex;
		align-items: center;
		margin-right: 24rpx;
		position: relative;
	}

	.checkbox-display {
		width: 44rpx;
		height: 44rpx;
		border: 2rpx solid #0081ff;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s ease;

		&.checked {
			background-color: #0081ff;
			border-color: #0081ff;
		}
	}

	.sim-number {
		font-size: 32rpx;
		color: #222;
		font-weight: 600;
		// margin-bottom: 16rpx;
		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
	}

	.sim-details {
		display: flex;
		flex-direction: column;
		gap: 12rpx;

	}

	.time-box {
		position: absolute;
		right: 32rpx;
		top: 32rpx;
		display: flex;
		align-items: center;
	}

	::v-deep .u-count-down__text {
		font-size: 14px !important;
		color: red !important;
	}

	.label {
		color: #888;
		width: 130rpx;
		font-weight: 500;
	}

	.value {
		color: #555;
		flex: 1;
	}

	.status {
		font-size: 28rpx;
		font-weight: 600;
	}

	/* 底部操作栏 */
	.footer-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 24rpx 32rpx 60rpx 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 -10rpx 25rpx rgba(0, 0, 0, 0.05);
		z-index: 10;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
	}

	.all-select {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.all-text {
		font-size: 28rpx;
		color: #333;
		margin-left: 12rpx;
		font-weight: 500;
	}

	.total-price {
		font-size: 30rpx;
		color: #0081ff;
		font-weight: 600;
		flex: 1;
		text-align: center;
	}

	/* 一键充值按钮渐变圆润 */
	.recharge-btn {
		background: linear-gradient(135deg, #0081ff, #00c6ff);
		color: #fff;
		border-radius: 30rpx;
		padding: 14rpx 36rpx;
		font-size: 28rpx;
		line-height: 1;
		// font-weight: 600;
		box-shadow: 0 6rpx 20rpx rgba(0, 129, 255, 0.3);
		transition: transform 0.2s ease, box-shadow 0.2s ease;

		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 12rpx rgba(0, 129, 255, 0.25);
		}
	}
</style>